import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import NavLayout from '../_Layout/NavLayout'
import ImgTabs from '../../widgets/NavBar/ImgTabs'
import ImgView from '../../widgets/ImgView'
import { useRecoilState } from 'recoil'
import { PhotosMock } from './mock'
import ImgInfoTabs from '../../widgets/NavBar/ImgInfoTabs'
import ImgWaterfall from '../../widgets/Waterfall/ImgWaterfall'
import BannerLayout from '../../widgets/_Layout/BaseLayout'
import CollectionsWaterfall from '../../widgets/Waterfall/CollectionsWaterfall'
import RelatedTags from '../../widgets/Tag/RelatedTags'
import { PictureService } from '../../transfer/service/PictureService'
import { TopicService } from '../../transfer/service/TopicService'

export default function Photos(props: any) {
    const [photos, setPhotos] = useRecoilState(PhotosMock)
    const [tags, setTags] = useState<any>([])
    const [topicId, setTopicId] = useState<string>()

    useEffect(() => {
        // new PictureService().getPictureInfo(props.params.imgId).then(res => {})
        new PictureService().getPictureInfo(props.params.imgId).then(res => {
            setPhotos(res.data.data)
            setTags(res.data.data.tags)
            setTopicId(res.data.data.topics[0].id)
        })
    }, [])

    return (
        <NavLayout>
            {/*<ImgTabs imgId={props.params.imgId} userId={props.params.userId} />*/}
            <ImgTabs data={photos} />
            <ImgView height={photos.height} width={photos.width} img={'http://localhost:3000/' + photos.imageUrl} />
            <ImgInfoTabs data={photos} />
            <BannerLayout>
                <div className={style.title}>
                    <span>推荐图片</span>
                </div>
            </BannerLayout>
            <ImgWaterfall topicId={topicId} type={'related'} count={3} />
            {/*<BannerLayout>*/}
            {/*    <div className={style.title}>*/}
            {/*        <span>推荐收藏夹</span>*/}
            {/*    </div>*/}
            {/*</BannerLayout>*/}
            {/*<CollectionsWaterfall type={'Related'} />*/}
            <BannerLayout>
                <div className={style.title}>
                    <span>推荐标签</span>
                </div>
            </BannerLayout>
            <RelatedTags tags={tags} />
        </NavLayout>
    )
}
